<template>
  <el-form ref="form" label-position="right" :model="currentRow" :rules="rules" label-suffix="："
           label-width="90px">
    <el-card>
      <div class="geology">
        核查信息
      </div>
      <el-row class="spot-check-base">
        <el-col :span="8">
          <el-form-item label="路线" prop="roadId">
            <el-select v-model="currentRow.roadId" clearable placeholder="选择路线" @change="changeRoad">
              <el-option
                v-for="item in roadList2"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="建设单位">
            <el-input v-model="currentRow.buildUnitName" disabled></el-input>
          </el-form-item>
          <el-form-item label="抽查单位">
            <el-input v-model="currentRow.unitName" placeholder="输入排查单位名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="标段" prop="roadSectionId">
            <el-select v-model="currentRow.roadSectionId" clearable placeholder="选择标段" @change="changeRoadSection">
              <el-option
                v-for="item in sectionList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="施工单位">
            <el-input v-model="currentRow.constructionUnitName" disabled></el-input>
          </el-form-item>
          <el-form-item label="抽查人">
            <el-input v-model="currentRow.userName" placeholder="输入抽查人姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="受检单位" prop="beCheckedUser">
            <el-select value-key="id" v-model="currentRow.beCheckedUser"  @change="changCheckedUser" placeholder="选择受检单位">
              <el-option
                v-for="(item,index) in inspectedUnitList"
                :key="index"
                :label="item.name"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="监理单位">
            <el-input v-model="currentRow.supervisorUnitName" disabled></el-input>
          </el-form-item>
          <el-form-item label="抽查日期" prop="checkTime">
            <el-date-picker
              v-model="currentRow.checkTime"
              type="date"
              placeholder="选择抽查日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="kaoheneirong">
      <el-collapse>
        <el-collapse-item title="考核内容">
          <div class="assessment-info">
            <el-table border :data="currentRow.itemList" class="m-t-24" :span-method="objectSpanMethod">
              <el-table-column label="考核类别" prop="group"></el-table-column>
              <el-table-column label="考核项目" prop="name"></el-table-column>
              <el-table-column label="扣分标准" width="95px" prop="standard"></el-table-column>
              <el-table-column label="考核评分" width="120px">
                <template slot-scope="scope">
                  <el-input-number v-model="scope.row.score"  :controls="false" :min="scope.row.min" :max="scope.row.max" placeholder="分数" type="number" style="width:100%"></el-input-number>
                </template>
              </el-table-column>
            </el-table>
            <el-row class="shuoming">
              <el-col :span="16"><span style="color: gray">注：①优：90-100分；②良：80-89分；③中:60-79分；③差：0-59分。</span></el-col>
              <el-col :span="4">总分：<span style="font-size: 20px;color: green">{{sum}}</span></el-col>
              <el-col :span="4">等级：{{checkLevel}}</el-col>
            </el-row>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-card>
    <el-card class="kaoheneirong" v-if="model === 'inspection'">
      <el-collapse>
        <el-collapse-item title="督查报告文件">
          <el-form-item prop="checkFileList">
            <upload-file prop="checkFileList" v-model="currentRow.checkFileList"
                         ref="uploadClear"></upload-file>
          </el-form-item>
        </el-collapse-item>
      </el-collapse>
    </el-card>
  </el-form>
</template>
<script>
import ItemMixins from "../../modules/item.mixins";
import constUrl from '@/services/env'
import {
  getRoadSectionInfo,
} from '@/services/model/road-mgmt';
import UploadFile from '@/components/upload-file'
export default {
  props: ['value', 'roadList2','model'],
  components: {UploadFile},
  mixins: [ItemMixins],
  data() {
    return {
      inspectedUnitList: [],
      sectionList: [],
      // 单位信息表单 校验规则
      rules: {
        roadId: {required: true, message: '请选择路线'},
        roadSectionId: {required: true, message: '请选择标段'},
        beCheckedUser: {required: true, message: '请选择受检单位'},
        checkTime: {required: true, message: '请选择抽查日期'},
        checkFileList: {required: true, message: '请上传督查文件'},
      },
      constUrl,
    }
  },
  computed: {
    sum() {
      let sum = 0
      this.currentRow.itemList.map(x => {
        if (x.score) {
          sum += Number(x.score);
        }
      })
      return sum
    },
    checkLevel() {
      if (this.sum >= 90) {
        return "优"
      } else if (this.sum >= 80) {
        return "良"
      } else if (this.sum >= 60) {
        return "中"
      }
      return "差"

    },
    currentRow: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  },
  methods: {
    //合并排查项
    objectSpanMethod({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 0) {
        if (rowIndex === 0) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else if (rowIndex === 2) {
          return {
            rowspan: 5,
            colspan: 1
          };
        } else if (rowIndex === 7) {
          return {
            rowspan: 6,
            colspan: 1
          };
        } else if (rowIndex === 13) {
          return {
            rowspan: 5,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    changCheckedUser(data) {
      this.currentRow.beCheckedUserId = data.id
      this.currentRow.beCheckedUnitName = data.name
    },
    //选择路线
    changeRoad() {
      this.$set(this.currentRow, 'roadSectionId', '');
      this.sectionList = []
      const {roadId} = this.currentRow
      this.getBidSectionList(roadId)
    },
    changeRoadSection() {
      this.$set(this.currentRow, 'slopeId', '');
      this.slopeList = []
      const {roadSectionId} = this.currentRow
      this.getRoadSectionInfo(roadSectionId)
    },
    //获取标段详情，读取关联的 监理单位，建设单位，施工单位
    async getRoadSectionInfo() {
      let {data} = await getRoadSectionInfo({roadSectionId: this.currentRow.roadSectionId})
      this.inspectedUnitList = []
      if (data) {
        //施工单位
        this.inspectedUnitList.push({
          id: data.constructionUserId,
          name: data.constructionUnitName,
        })
        //监理单位
        this.inspectedUnitList.push({
          id: data.supervisorUserId,
          name: data.supervisorUnitName,
        })
        if(this.model === 'inspection'){
          //建设单位
          this.inspectedUnitList.push({
            id: data.deptId,
            name: data.deptIdName,
          })
        }
        this.currentRow.buildUnitName = data.deptIdName
        this.currentRow.buildUserId = data.deptId
        this.currentRow.constructionUnitName = data.constructionUnitName
        this.currentRow.constructionUserId = data.constructionUserId
        this.currentRow.supervisorUnitName = data.supervisorUnitName
        this.currentRow.supervisorUserId = data.supervisorUserId
      }
    },
    // 内部表单校验
    _validatorForm() {
      this.currentRow.score = this.sum
      this.currentRow.checkLevel = this.checkLevel
      return new Promise((resolve) => {
        this.$refs.form.validate((valid) => {
          valid && resolve()
        })
      })
    }
  }
  ,
  mounted() {

  }
  ,
  created() {

  }
  ,
  activated() {
    // // 查询单位类型
    if (this.currentRow.roadId) {
      this.getBidSectionList(this.currentRow.roadId)
    }
  }
}
</script>

<style lang="less">
  .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 205px;
  }

  .geology-children {
    font-size: 15px;
    border-bottom: 1px solid;
    margin-bottom: 20px;
    margin-top: 20px;
    margin-left: 20px;
  }

  .form_compact {
    display: flex;

    & /deep/ .el-input input {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    & /deep/ .el-button {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .el-button {
    padding-right: 40px;
  }

  .el-form-item__label {
    /*padding: 0px;*/
  }

  input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }

  .m-t-24 {
    margin-top: 10px;

    td, th {
      padding: 5px 0;
      font-size: 13px;
    }

    .el-button--text {
      color: red;
    }
  }

  .geology {
    font-size: 20px;
    border-bottom: 1px solid;
    margin-bottom: 20px;
    margin-top: 20px;

  }

  .collapse .title {
    padding: 0 20px !important;
  }

  .kaoheneirong {
    margin-top: 20px;

    .el-collapse .el-collapse-item__header {
      font-size: 20px;
      border-bottom: 1px solid;
    }
  }

  .assessment-info {
    .el-col {
      text-align: center;
    }

    .el-form-item__content {
      margin-left: 0px !important;
    }

    .shuoming {
      margin-top: 20px;
      font-size: 17px;
    }

    .el-form-item {
      margin-bottom: 0px;
    }

    .el-input__inner {
      height: 30px;
    }
  }

  .spot-check-base {
    .el-date-editor.el-input, .el-date-editor.el-input__inner {
      width: 195px !important;
    }
  }
</style>
